<template>
	<view class="tc-c-list" :style="{paddingTop: paddingTop + 'px'}">
		
		<navBar title="评价详情" />
		
		<!-- 头部基本信息 -->
		<view class="tc-cl-header">
			<view class="tc-clh-left">
				<view class="tc-clhl-img">
					<image :src="dataInfo.headImgUrl || currentImg" mode="scaleToFill"></image>
				</view>
				<view class="tc-clhl-baseInfo">
					<view class="tc-clhlb-number">
						<view class="tc-clhlbn-phone">
							{{ dataInfo.driverMobile && dataInfo.driverMobile.replace(dataInfo.driverMobile.substring(3, 7), '****') }}
						</view>
						<view class="tc-clhlbn-car" v-if="dataInfo.plateNum">
							{{ dataInfo.plateNum && dataInfo.plateNum.replace(dataInfo.plateNum.substring(2), '******')}}
						</view>
					</view>
					<view class="tc-clhlb-score">
						<uni-rate readonly :max="5" :size="16" :value="dataInfo.score" allow-half activeColor="#CF1A1B"/>
						<text :class="['siml-text', dataInfo.score && 'text-color']">
							{{ dataInfo.score ? parseInt(dataInfo.score) === parseFloat(dataInfo.score) ? `${dataInfo.score}.0` : dataInfo.score : '暂无评分' }}
						</text>
					</view>
				</view>
			</view>
			<view class="tc-clh-right">
				{{ dataInfo.createdTime }}
			</view>
		</view>
		<!-- 评价内容 -->
		<view class="tc-cl-main">
			<view class="tc-clm-content ellipsis-2">{{ dataInfo.content }}</view>
			<view class="tc-clm-video" v-if="dataInfo.attachList && dataInfo.attachList.length">
				<view class="tc-clmv-list" v-for="vio in dataInfo.attachList" :key="vio.attachUrl">
					<video v-if="videoTypeList.includes(getFileType(vio.attachUrl))" :src="vio.attachUrl" @error="videoErrorCallback" ></video>
					<image v-else :src="vio.attachUrl || currentImg" mode="widthFix" @click.stop="handlePreviewImage(vio.attachUrl)"></image>
				</view>
			</view>
		</view>
		<!-- 回复 -->
		<view class="tc-cl-reply" v-if="dataInfo.replyState === 'Y'">
			<view class="tc-clr-icon">
				<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_huifu.png" mode=""></image>
			</view>
			<view class="tc-clr-des ellipsis-2">
				<text class="tc-clrd-label">门店回复：</text>
				<text class="tc-clrd-value">
					{{ dataInfo.replyContent }}
					</text>
			</view>
		</view>
	</view>
</template>

<script>
	import currentImg from '@/static/currentImg.png'
	import navBar from '@/components/navBar.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				currentImg,
				paddingTop: 0,
				id: null,
				dataInfo: {},
				videoTypeList: ['mp4']	// 用户可上传得视频文件类型
			};
		},
		computed: {
			// 判断用户评价内容是图片还是视频
			getFileType(){
				return (fileUrl) => {
					return fileUrl && fileUrl.length && fileUrl.substring(fileUrl.lastIndexOf(".") + 1).toLowerCase()
				}
			},
		},
		methods: {
			// 图片预览
			handlePreviewImage(url){
				uni.previewImage({
					current: 0,
					urls: [url]
				})
			},
			async getDetail(id){
				uni.showLoading({
					title: '加载中...'
				})
				const res = await this.$request({
					method: 'GET',
				  url: '/api-user/terminalEvaluation/detail',
					data: {
						id
					}
				})
				
				this.dataInfo = res.datas || {}
				uni.hideLoading()
			}
		},
		onLoad(query){
			this.id = query.id
			this.getDetail(query.id)
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
		}
	}
</script>

<style lang="scss" scoped>
.tc-c-list {
	box-sizing: border-box;
	min-height: 100vh;
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 20rpx 28rpx 28rpx;
	margin-top: 20rpx;
	// 头部基本信息
	.tc-cl-header {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		.tc-clh-left {
			display: flex;
			.tc-clhl-img {
				margin-right: 14rpx;
				image {
					width: 40px;
					height: 40px;
					border-radius: 50%;
				}
			}
			.tc-clhl-baseInfo {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.tc-clhlb-number {
					display: flex;
					align-items: center;
					color: rgba(0, 0, 0, 1);
					.tc-clhlbn-car {
						font-size: 10px;
						color: rgba(114, 69, 0, 1);
						margin-left: 6rpx;
						padding: 0 2rpx;
						background: linear-gradient(180deg, #FFE9BE 0%, #FFD88B 100%);
						border-radius: 4rpx;
					}
				}
				.tc-clhlb-score {
					display: flex;
					align-items: center;
					text {
						margin-left: 6rpx;
					}
				}
			}
		}
		
		.tc-clh-right {
			color: rgba(0, 0, 0, 0.65);
		}

	}
	// 评价内容
	.tc-cl-main {
		.tc-clm-content {
			margin-top: 14rpx;
			font-size: 13px;
			color: rgba(0,0,0,0.85);
		}
		.tc-clm-video {
			// display: flex;
			gap: 8rpx;
			margin: 26rpx 0;
			.tc-clmv-list {
					image,
					video {
						width: 100%;
						// height: 88px !important;
						border-radius: 12rpx;
					}
			}
		}
	}
	// 回复
	.tc-cl-reply {
		display: flex;
		margin-top: 20rpx;
		.tc-clr-icon {
			image {
				width: 16px;
				height: 16px;
			}
		}
		.tc-clr-des {
			font-size: 12px;
			.tc-clrd-label {
				color: rgba(255, 154, 56, 1);
				margin: 0 6rpx;
			}
		}
	}
}
</style>
